<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <a-form @submit="handleSubmit" :form="form">
      <a-form-item
        label="接口地址"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-input
          v-decorator="[
            'interfaceAddr',
            {rules: [{ required: true, message: '请输入北向通道的地址' }]}
          ]"
          name="name"
          placeholder="请输入接口地址"
          @blur="isUrl()"
        />
      </a-form-item>

      <a-form-item
        label="登录用户名"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-input
          v-decorator="[
            'username',
            {rules: [{ required: true, message: '请输入登录用户名' }]}
          ]"
          name="username"
          placeholder="请输入登录用户名"
        />
      </a-form-item>

      <a-form-item
        label="登录密码"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-input-password
          v-decorator="[
            'password',
            {rules: [{ required: true, message: '请输入登录密码' }]}
          ]"
          name="password"
          placeholder="请输入登录密码"
        />
      </a-form-item>
      <div style="text-align:center">
        <a-button style="margin:10px" type="primary">保存</a-button>
        <a-button style="margin:10px" type="primary">重置</a-button>
        <a-button style="margin:10px" type="primary">登录</a-button>
      </div>
    </a-form>
  </a-card>
</template>

<script>
export default {
  name: 'parameterConfig',
  data() {
    return {
      description: '表单用于北向通信的地址及用户和密码的配置。',
      value: 1,

      // form
      form: this.$form.createForm(this)
    }
  },
  methods: {
    // handler
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          // eslint-disable-next-line no-console
          console.log('Received values of form: ', values)
        }
      })
    },
    isUrl() {
      var strRegex =
        '^((https|http|ftp|rtsp|mms)?://)' +
        "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" + //ftp的user@
        '(([0-9]{1,3}.){3}[0-9]{1,3}' + // IP形式的URL- 199.194.52.184
        '|' + // 允许IP和DOMAIN（域名）
        "([0-9a-z_!~*'()-]+.)*" + // 域名- www.
        '([0-9a-z][0-9a-z-]{0,61})?[0-9a-z].' + // 二级域名
        '[a-z]{2,6})' + // first level domain- .com or .museum
        '(:[0-9]{1,4})?' + // 端口- :80
        '((/?)|' + // a slash isn't required if there is no file name
        "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$"
      var re = new RegExp(strRegex)
      if (re.test()) {
        console.log('url------true')
        return true
      } else {
        console.log('url------false')
        return false
      }
    }
  }
}
</script>